import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js';
import {
  OBJLoader
} from 'three/examples/jsm/loaders/OBJLoader';
import {
  MTLLoader
} from 'three/examples/jsm/loaders/MTLLoader';

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader  } from "three/examples/jsm/loaders/DRACOLoader";
export default class ZThree {
  constructor(id) {
    this.id = id;
    this.el = document.getElementById(id);
    console.log(this.el);
  }

  // 初始化场景
  initThree() {
    let _this = this;
    let width = this.el.offsetWidth;
    console.log(width);
    let height = this.el.offsetHeight;
    console.log(height);
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45, width / height, 200, 150000)
    // this.camera = new THREE.PerspectiveCamera(45, width / height, 10, 1500)
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    })
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.setSize(width, height)
    this.el.append(this.renderer.domElement)
    this.renderer.setClearColor('#000')

    window.addEventListener('resize', function () {
      _this.camera.aspect = _this.el.offsetWidth / _this.el.offsetWidth;
      _this.camera.updateProjectionMatrix();
      _this.renderer.setSize(_this.el.offsetWidth, _this.el.offsetWidth);
    }, false)
    // this.render()
  }

  // 初始化helper
  initHelper() {
    // this.scene.add(new THREE.AxesHelper(150000))
  }

  // 初始化控制器
  initOrbitControls() {
    let controls = new OrbitControls(this.camera, this.renderer.domElement)
    controls.enableDamping = true
    controls.enableZoom = true
    controls.autoRotate = false
    controls.autoRotateSpeed = 0.3
    controls.enablePan = true
    this.controls = controls
  }

  initLight() {
    let directionalLight = new THREE.DirectionalLight('#fff')
    directionalLight.position.set(30, 30, 30).normalize()
    this.scene.add(directionalLight)
    let ambientLight = new THREE.AmbientLight('#fff', 0.3)
    this.scene.add(ambientLight)
    return {
      directionalLight,
      ambientLight
    }
  }


  // 加载obj模型
  // loaderObjModel(path, objName, mtlName) {
  //   return new Promise(resolve => {
  //     new MTLLoader()
  //       .setPath(path)
  //       .load(mtlName + '.mtl', function (materials) {
  //         console.log(materials)
  //         materials.preload();

  //         // 加载obj
  //         new OBJLoader()
  //           .setPath(path)
  //           .setMaterials(materials)
  //           .load(objName + '.obj', function (object) {
  //             resolve(object)
  //           },function(xhr){
  //             console.log('加载进度'+Math.floor(xhr.loaded / xhr.total * 100)+'%');
  //           },function(err){
  //             console.error('加载发生错误');
  //           });
  //       });
  //   })
  // }

// glb加载模型
  loadGltf() {
    const loader = new GLTFLoader()
    // const dracoLoader = new DRACOLoader()
    // dracoLoader.setDecoderPath('/draco/')
    // dracoLoader.preload()
    // loader.setDRACOLoader(dracoLoader)
    loader.load('model/factory.glb', (gltf) => {
      gltf.scene.scale.set(5000, 5000, 5000);
        // gltf.scene.position.set(0,0,0)
        // let axis = new Three.Vector3(0,1,0);//向量axis
        // gltf.scene.rotateOnAxis(axis,Math.PI/2);
        // //绕axis轴逆旋转π/16
        // gltf.scene.rotateOnAxis(axis,Math.PI/-20);
        // gltf.scene.rotateOnAxis(axis,Math.PI/50);
        //gltf.rotateY(Math.PI / 2);
        this.scene.add(gltf.scene)
        this.renderer.render(this.scene, this.camera)
    }, (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    }, (error) => {
        console.error(error)
    })
   

}
            // 加载天空盒
  loaderSky(path) {
    let skyTexture = new THREE.CubeTextureLoader()
      .setPath(path)
      .load([
        "px.png", //右
        "nx.png", //左
        "py.png", //上
        "ny.png", //下
        "pz.png", //前
        "nz.png" //后
      ]);

    this.scene.background = skyTexture;
    this.renderer.setClearAlpha(1);
  }
        }

